<template>
	<div class="scheme">
		<!-- <div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-lx-cascades"></i>角色管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div> -->

		<div v-if="editVisible">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-del mr10" @click="addEdit">新建</el-button>
			</div>

			<div class="tables">
				<el-table :data="locationList" v-loading="loading" border max-height="650" highlight-current-row
					:row-style="{height: '20px'}" :header-cell-style="{background:'#e6e6e6',color:'#000000'}"
					@row-click="handle" ref="multipleTable">
					<el-table-column v-for="(item,index) in tableLabel" :key="index" :prop="item.prop"
						:align="item.align" :width="item.width" :label="item.label">
					</el-table-column>

					<el-table-column label="操作" width="150" align="center">
						<template slot-scope="scope">
							<el-button type="primary" plain size="mini" icon="el-icon-edit"
								@click="handleEdit(scope.$index, scope.row)">编辑
							</el-button>
							<!-- <el-button type="danger" size="mini" icon="el-icon-delete"
								@click="handleDelete(scope.$index, scope.row)">删除
							</el-button> -->
						</template>
					</el-table-column>
				</el-table>

			</div>
			<div class="pagination">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>
		<!-- 新增、编辑弹框 -->
		<div class="container" v-else>
			<div class="handle-box">
				{{ title }}
			</div>
			<el-form ref="form" :model="form" label-width="80px" :rules="rules">
				<el-form-item label="角色名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入角色名称"></el-input>
				</el-form-item>
				<el-form-item label="菜单权限">
					<el-cascader v-model="form.menus" placeholder="请选择（支持搜索）" :options="allMenus" style="width: 100%;"
						:props="{  multiple: true,label: 'name', value: 'id', children: 'children'}" filterable>
					</el-cascader>
				</el-form-item>
				<el-form-item label="接口权限">
					<div class="check_list">
						<div class="item" v-for="(v,k) in permissions" :key="k">
							<div class="permission_title">{{ v.name }}
								<el-tag size="mini" @click="check_all(k)" style="float:right;margin-top:5px;">点击全选
								</el-tag>
							</div>
							<div class="cblock">
								<div class="cbox" v-for="(vo,key) in v.permissions" :key="key">
									<el-checkbox v-model="vo.checked">{{ vo.name }}</el-checkbox>
									<el-tag
										style="background-color: #efefef;color: red;padding:0 5px;box-sizing: border-box;border-radius: 4px;"
										size="mini">
										{{ vo.apis }}
									</el-tag>
								</div>
							</div>
						</div>
					</div>
				</el-form-item>

				<el-form-item>
					<el-button @click="editVisible=true">取消</el-button>
					<el-button type="primary" @click="onSubmit" v-preventReClick>确定</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import common from '../../common/common.js'

	export default {
		data() {
			return {
				title: '添加角色',
				editVisible: true, //默认新建显示
				// 表头标题数据
				tableLabel: [{
						label: '序号',
						width: '60',
						prop: 'xuHao',
						align: 'center'
					},
					{
						label: '角色名称',
						width: '',
						prop: 'name',
						align: 'center'
					}
				],
				locationList: [], //管理员列表模拟数据
				isEdit: false, //编辑确认按钮默认隐藏
				// 弹框表单
				form: {
					name: '',
					status: false,
					tack: false,
				},
				loading: false,
				id: '',
				permissions: [], // 接口权限模拟数据
				allMenus: [], //菜单
				page: 1,
				limit: 10,
				total: 0,
				params: {
					page: 1,
					per_page: 10,
				},
				info: {
					permission_id: [],
				},
				rules: {
					name: [{
						required: true,
						message: "请输入角色名称",
						trigger: 'blur'
					}],
				},

			}
		},
        created() {
            // 角色列表
            this.getLocationList();
            // 接口权限列表
            this.getPermissionGroupList();
            // 获取菜单列表
            this.getMenus();
        },
        activated() {
			// 角色列表
			this.getLocationList();
			// 接口权限列表
			this.getPermissionGroupList();
			// 获取菜单列表
			this.getMenus();
		},

		methods: {
			// 分页
			handleSizeChange(size) {
				this.params.per_page = size;
				this.getLocationList();
			},
			handleCurrentChange(index) {
				this.params.page = index;
				this.getLocationList();
			},
			// 点击全选按钮
			check_all(e) {
				this.permissions[e].permissions.forEach(item => {
					if (!item.checked) {
						this.$set(item, 'checked', true);
					} else {
						this.$set(item, 'checked', false);
					}
				})
			},

			// 获取角色列表
			getLocationList() {
				common.getQueryList(this.$api.roles, this.params, this);
			},
			// 获取接口权限列表
			getPermissionGroupList() {
				this.$get(this.$api.permissionGroups, {
					per_page: 1000
				}).then(res => {
					if (res.code == 200) {
						this.permissions = res.data.data;
						this.loading = false;
					} else {
						this.$message.error(res.msg);
					}

				})
			},
			// 获取菜单列表
			getMenus() {
				this.$get(this.$api.adminMenus, {
					isAll: 1
				}).then(res => {
					if (res.code == 200) {
						this.allMenus = res.data;
						this.loading = false;
					} else {
						this.$message.error(res.msg);
					}

				})
			},
			getCheckPermission() {
				let permission_id = [];
				this.permissions.forEach(items => {
					items.permissions.forEach(item => {
						if (!this.$isEmpty(item.checked) && item.checked) {
							permission_id.push(item.id);
						}
					})
				})
				if (permission_id.length > 0) {
					this.info.permission_id = permission_id;
				} else {
					this.info.permission_id = undefined;
				}

			},
			// 点击新建按钮
			addEdit() {
				this.title = '新增角色'
				// this.form = this.$options.data().form;
				this.form = {
					name: '',
					status: false,
					tack: false,
				}
				this.editVisible = false;
				this.isEdit = false;
				this.permissions.forEach(items => {
					items.permissions.forEach(item => {
						// if(!this.$isEmpty(item.checked) && item.checked){
						//     permission_id.push(item.id);
						// }
						if (!item.checked) {
							this.$set(item, 'checked', false);
						} else {
							this.$set(item, 'checked', false);
						}
					})
				})
			},
			// 点击确定按钮
			onSubmit() {
				if (this.form.name == '') {
					return this.$message.error('请输入角色名称！')
				}
				this.getCheckPermission();
				let menu_id = []
				if (Array.isArray(this.form.menus)) {
					this.form.menus.forEach(item => {
						menu_id.push(Number(item[item.length - 1]))
					})
				}

				let params = {
					name: this.form.name,
					menu_id: menu_id,
					permission_id: this.info.permission_id,
				}
				if (this.isEdit) {
					this.$put(this.$api.roles + '/' + this.id, params).then(res => {
						if (res.code == 200) {
							this.editVisible = true;
							this.getLocationList();
							this.$message.success('编辑成功！');
						} else {
							this.editVisible = false;
							this.$message.error(res.msg);
						}
					})
				} else {
					this.$post(this.$api.roles, params).then(res => {
						if (res.code == 200) {
							this.editVisible = true;
							this.getLocationList();
							this.$message.success('操作成功！');
						} else {
							this.editVisible = false;
							this.$message.error(res.msg);
						}
					})
				}

			},
			// 点击确定按钮
			saveEdit() {
				if (this.form.name == '') {
					return this.$message.error('请输入角色名称！');
				}

			},
			// 点击编辑按钮
			handleEdit(index, row) {
				this.editVisible = false;
				this.isEdit = true;
				this.title = '编辑角色';

				this.form.name = row.name;
				this.id = row.id;
				this.$get(this.$api.roles + '/' + row.id).then(res => {
					res.data.menu_id = [];
					res.data.permission_id = [];
					res.data.menus.forEach(item => {
						res.data.menu_id.push(item.pids.split(','));
					})
					res.data.permissions.forEach(item => {
						res.data.permission_id.push(item.id);
					})
					this.info = res.data;
					this.form.menus = res.data.menu_id;
					this.$get(this.$api.permissionGroups, {
						per_page: 100
					}).then(res => {
						this.permissions = res.data.data;
						this.permissions.forEach(items => {
							items.permissions.forEach(item => {
								if (this.info.permission_id.indexOf(item.id) > -1) {
									this.$set(item, 'checked', true);
								} else {
									this.$set(item, 'checked', false);
								}
							})
						})
					});

				})


			},
			// 点击删除按钮
			handleDelete(index, row) {
				let tip = '此操作将删除角色, 是否继续?'
				let url = this.$api.roles + '/' + row.id;
				common.deleteData(url, tip, this);
			},

		}
	}
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.del-dialog-cnt {
		font-size: 16px;
		text-align: center
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.mr10 {
		margin-right: 10px;
	}

	/* 接口权限模块样式 */
	.permission_title {
		background-color: #EEEEEE;
		padding: 0 20px;
		border-radius: 4px;
		margin: 10px 0 5px 0;
	}

	.cblock {
		display: flex;
		flex-wrap: wrap;
	}

	.cbox {
		margin-right: 40px;
		width: 30%;
	}

	/* 设置当前页面elementui table 选中行时的背景色*/
	.el-table__body tr.current-row>td {
		background-color: #ebf0f1 !important;
		color: #000000;
		font-weight: 700;
	}

	.pagination {
		text-align: center;
	}

	/deep/ .el-table--small td,
	.el-table--small th {
		/* padding: 1px 0; */
		padding: 16px 0;

	}
</style>
